<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js" ></script>
</head>
<body>
    
    <div id="app">
        <!-- 
            事件修饰符: 在事件后面添加 
                - .stop 阻止冒泡 
                - .prevent 阻止默认行为
            
            https://cn.vuejs.org/v2/api/#v-on
         -->
        <div>{{num}}</div>

        <div v-on:click='handle0'>
            <button v-on:click.stop='handle1'>阻止冒泡</button>
            <a href="http://www.baidu.com" v-on:click.prevent="handle2">跳转到百度</a>
        </div>
        
        
        
    </div>

    <script type="text/javascript">
        
       var vm = new Vue({
           el:'#app',
           data:{
               num:0
           },
           methods:{
                handle0: function(){
                    this.num++;
                },
                handle1: function(event){
                    // 阻止冒泡
                    // event.stopPropagation();
                },
                handle2: function(){
                    // 阻止默认行为
                    // event.preventDefault();
                }

           }
       })      
       
    </script>
</body>
</html>


       